<template>
	<u-transition :show="true" mode="slide-up" duration="700">
		<view class="big">
			<view class="message_box">
				<u-transition :show="true" mode="slide-left" duration="900">
					<view class="title">{{ text.title }}</view>
				</u-transition>
				<u-transition :show="true" duration="1100">
					<view class="text">{{ text.text }}</view>
				</u-transition>
				<u-transition :show="true" duration="1300">
					<view class="time">{{ text.time }}</view>
				</u-transition>
			</view>
		</view>
	</u-transition>
</template>

<script>
export default {
	data() {
		return {
			seatId:'',
			text: {
				type: '1',
				isread: true,
				title:'',
				text:'',
				/* title: '人是假的 没什么执着 ',
				text:
					'桃花坞里桃花庵，桃花庵里桃花仙。 桃花仙人种桃树，又折花枝当酒钱。 酒醒只在花前坐，酒醉还须花下眠。 花前花後日复日，酒醉酒醒年复年。 但愿老死花酒间，不愿鞠躬车马前。 车尘马足贵者趣，酒盏花枝贫者缘。 若将富贵比贫贱，一在平地一在天。 若将贫贱比车马，他得驱驰我得闲。 世人笑我忒风颠，我咲世人看不穿。 记得五陵豪杰墓，无酒无花锄作田。',
				 */
				time: '2022-1-21'
			}
		};
	},
	methods: {
		MessageContent() {
			if(this.seatId){
				uni.$u.http
					.get('/app/message/getOneMessage/'+this.seatId)
					.then(res => {
						this.text = res.data
					})
					
			}
			
		}
	},
	onLoad(param) {
		
		this.seatId = param.id;
		this.MessageContent();
	}
};
</script>

<style lang="scss">
.big {
	// border: 1px #000000 solid;
	height: 100%;
	display: flex;
	justify-content: center;
}
.message_box {
	// border: 1px #909399 solid;
	height: 100%;
	width: calc(88vw + 3px);
	margin-top: 27px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}
.title {
	margin-top: 10px;
	// border: 1px #000000 solid;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 21px;
	font-weight: 700;
	height: calc(13vw);
}
.time {
	// border: 1px #000000 solid;
	color: #909399;
}
.text {
	// border: 1px #000000 solid;
	margin-top: 8px;
	padding: 13px 17px 0 17px;
	border-top: 1px #909399 solid;
	border-bottom: 1px #909399 solid;
	text-align: center;
	font-size: 17px;
	height: calc(125vw);
	white-space: pre-wrap;
	overflow: auto;
	word-wrap: break-word;
	text-indent: 2em;
}
</style>
